<template>
  <a-modal v-model:open="open"
           :width="960"
           :footer="null"
           :title="formState.id?'修改用户':'添加用户'"
           :keyboard="false"
           :mask-closable="false"
           @cancel="handleClose">
    <a-form
        :model="formState"
        name="basic"
        class="mt20"
        layout="horizontal"
        style="width: 100%;"
        ref="formRef"
        :rules="rules"
        :label-col=" { style: { width: '150px' } }"
        :wrapper-col="{ span: 24}"
        autocomplete="off"
    >
      <a-row class="flex justify-center">
        <a-col :span="18">
          <a-form-item
              label="请选择角色"
              name="account"
          >
            <a-select
                v-model:value="roleArr"
                mode="multiple"
                style="width: 100%"
                placeholder="请选择角色"
            >
              <template v-for="(role,index) in roleList" :key="index">
                <a-select-option :value="role.id" :label="role.roleName">
                  <span>{{role.roleName}}</span>
                </a-select-option>
              </template>
            </a-select>

          </a-form-item>
          <a-form-item
              label="账号"
              name="account"
          >
            <a-input v-model:value.trim="formState.account" maxlength="60" placeholder="请输入账号"/>
          </a-form-item>
          <a-form-item
              label="昵称"
              name="username"
          >
            <a-input v-model:value.trim="formState.username"  maxlength="60" placeholder="请输入昵称"/>
          </a-form-item>
          <a-form-item
              label="头像"
              name="avatar"
          >
            <a-input v-model:value.trim="formState.avatar" placeholder="请上传头像"/>
          </a-form-item>
          <a-form-item
              label="手机"
              name="phone"
          >
            <a-input v-model:value.trim="formState.phone"  maxlength="11" placeholder="请输入手机"/>
          </a-form-item>

          <a-form-item
              label="邮件"
              name="email"
          >
            <a-input v-model:value.trim="formState.email"  maxlength="80" placeholder="请输邮件"/>
          </a-form-item>

          <a-form-item
              v-if="!formState.id"
              label="初始密码"
              name="password"
          >
            <a-input v-model:value.trim="formState.password"  maxlength="16" placeholder="请输入初始密码"/>
          </a-form-item>

          <a-form-item
              label="状态"
              name="status"
          >
            <a-switch v-model:checked="formState.status"
                      :checked-value="1"
                      :un-checked-value="0"
                      checked-children="激活"
                      un-checked-children="未激活"/>
          </a-form-item>
          <a-form-item>
            <a-button style="margin-left: 150px" type="primary" @click.stop.prevent="onSubmit">
              {{ formState.id ? '更新用户' : '保存用户' }}
            </a-button>
            <a-button style="margin-left: 10px" danger type="primary" @click.stop.prevent="handleClose">
              关闭
            </a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script setup>
const open = ref(false);
const formRef = ref({})
const roleList = ref([])
const roleArr = ref([])
const emits = defineEmits(["success"])
const formState = ref({
  id:"",
  roleIds:"",
  account:"",
  password:"123456",
  username:"",
  avatar:"",
  phone:"",
  email:"",
  status:1,
  admin:'admin',
});

// 验证规则
const rules = {
  account: [ {required: true, message: '请输入账号', trigger: 'blur'}],
  username: [ {required: true, message: '请输入昵称', trigger: 'blur'}],
};

const onSubmit = async () => {
  try {
    await formRef.value.validate()
    if(roleArr.value && roleArr.value.length > 0){
      formState.value.roleIds = roleArr.value.join(",")
    }
    if(formState.value.id){
      await useUpdateUserApi(formState.value)
    }else{
      await useSaveSystemUserApi(formState.value)
    }
    useMessage().success("操作成功")
    handleClose()
    emits("success")
  } catch (e) {
    useMessage().error(e.msg)
  }
};

const handleOpen = async (record) => {
  open.value = true
  await handleLoadRoleList();
  if(record && record.id) {
    const resp = await useGetUserApi(record.id)
    formState.value = resp.data
    roleArr.value = resp.data.roleIds ? resp.data.roleIds?.split(",") : []
  }
}

const handleLoadRoleList = async ()=>{
   const resp = await userLoadRoleApi({pageNo:1,pageSize:100})
   roleList.value = resp.data.records;
}

const handleClose = () => {
  roleArr.value = []
  formState.value = {
    id:"",
    account:"",
    password:"123456",
    username:"",
    avatar:"",
    phone:"",
    email:"",
    status:1,
    admin:'admin',
  }
  open.value = false
}

defineExpose({
  handleOpen
})
</script>

<style lang="scss" scoped>
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    overflow: auto;
    border-radius: 0px;
  }

  :where(.css-dev-only-do-not-override-1hsjdkk).ant-modal .ant-modal-header {
    background: transparent;
  }

  .ant-modal-body {
    flex: 1;
  }
}
</style>